<template>
	<view class="pickup-container" :class="themeStyle">
		<view class="pickup-home">
			<!-- <image src="../../../static/red_packet.png" mode="aspectFit"></image> -->
			<image :src="dataList.pickpoint_image" mode="aspectFit"></image>
		</view>
		<view class="pickup-name">
			<text class="stores">小慧-凯旋门门店</text>
			<view class="pickup-info">
				<view class="score">
					<view v-for="i in 5"><image class="img" :src="$util.img('upload/uniapp/pick_up/star.png')" mode="aspectFit"></image></view>
					<text class="scores">5.0分</text>
				</view>
				<text class="store-distance">距您0.06m</text>
			</view>
		</view>
		<view class="pickup-address">
			<view class="pickup-address-info">
				<text class="addr">{{dataList.full_address}}{{dataList.address}}</text>		
			<!-- 	<text class="addr">郑州市金水区花园路建业凯旋广场3号楼608</text>		 -->
				<text>{{dataList.telphone}}</text>
			</view>
			<view class="pickup-phone">
				<image :src="$util.img('upload/uniapp/pick_up/pickup-phone.png')"></image>
			</view>
		</view>
		<view class="pickup-intro">
			<view class="pickup-title">
				{{ dataList.pickpoint_name }}
			</view>
			<view class="pickup-content">
				门店简介门店简介门店简介门店简介门店简介门店简介门店简介门店简介
			</view>
			<view class="icon-logo">
				<image :src="$util.img('upload/uniapp/pick_up/arrow.png')" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	computed: {
		themeStyle() {
			return 'theme-' + this.$store.state.themeStyle;
		}
	},
	data() {
		return {
			dataList: '',
		}
	},
	onShow() {
		//获取传过来的自提点id   pickpoint_id
		this.getPointDetail();
	},
	methods: {
		getPointDetail() {
			this.$api.sendRequest({
				url: '/pickpoint/api/pickpoint/detail',
				data: {
					pickpoint_id: 8,
				},
				success: res=> {
					if(res.code == 0 && res.data) {
						this.dataList = res.data;
						//console.log(this.dataList,'1111')
					}	
				}
			});
		}
	}
};
</script>

<style lang="scss">
$col: column;
@mixin layout($flex-dir: row,$padding-top: $ns-padding,$padding-left: $ns-padding) {
	display: flex;
	flex-direction: $flex-dir;
	box-sizing: border-box;
	padding: $padding-top $padding-left;
}

.pickup-home {
	image {
		width: 100vw;
	}
}

.pickup-name {
	@include  layout($col,$ns-padding, 2 * $ns-padding);
	
	.stores {
		font-size: 36rpx;
		font-weight: 600;
	}
	
	
	.pickup-info {
		@include  layout(row,0,0);
		.store-distance {
			margin-left: 60rpx;
			color: #909399;
		}
		
		.score {
			@include  layout(row,0,0);
			.img {
				width: 24rpx;
				height: 24rpx;
			}
			
			.scores {
				margin-left: 10rpx;
				color: #FFB100;
			}
		}
	}
	
}

.pickup-address {
	@include  layout(row,$ns-padding, $ns-padding);
	justify-content: space-between;
	align-items: center;
	.pickup-address-info {
		@include  layout($col,$ns-padding,$ns-padding);
		
		.addr {
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: wrap;
			margin-bottom: 40rpx;
		}
	}
	
	.pickup-phone {
		image {
			width: 64rpx;
			height: 64rpx;
		}
	}
}

.pickup-intro {
	@include  layout($col,2 * $ns-padding, 2 * $ns-padding);
	
	.pickup-title {
		font-size: 34rpx;
		font-weight: 550;
	}
	
	.pickup-content {
		padding-top: 2 * $ns-padding;
		color: #606266;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: wrap;
	}
	
	.icon-logo {
		@include layout(row,2 * $ns-padding,0);
		justify-content: center;
		align-items: center;
		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
}
</style>

